<template>
	<view>
		<navigator class="goods_item" :url="`/pages/goods_detail/index?goods_id=${goods_id}`">
			<view class="goods_img_container">
					<!-- 图片懒加载只用scroll-view里面的image图片才能设置 lazy-load 小程序有封装好,web浏览器也有这个概念,是监听滚动条的,把图片的src隐藏,到滚动触发的时候就可以显示src,再加载图片 -->
				<image :src="goods_small_logo||'/static/empty.png'" style="width:100%;height:100%;" :lazy-load="true"></image>
				</view>
			<view class="goods_text_container">
				<text class="goods_title" >{{ goods_name }}</text>
				<vive style="width:100%; display: flex; align-items: center; justify-content: space-between; padding-right:15rpx ;box-sizing: border-box;">
				<text class="dollar" v-if="goods_price">
					￥
					<text class="goods_pirce" >{{goods_price }}</text>
				</text>
				<!-- 这里搞个插槽 -->
				<slot></slot>
			</vive>
			</view>
		</navigator>
	</view>
</template>

<script>
export default {
	props: {
		goods_id:{
			requires:true,
			default:''
		},
		goods_name:{
			requires:true,
			default:''
		},
		goods_small_logo:{
			requires:true,
			default:''
		},
		goods_price:{
			requires:true,
			default:''
		},
	},
	data() {
		return {
			
		};
	},
	onLoad(){
		console.log(this.price_goods)
	}
};
</script>

<style lang="less">
.goods_item {
	display: flex;
	justify-content: space-between;
	/* align-items: center; */
	width: 698rpx;
	height: 209rpx;
	padding: 20rpx 26rpx;
	/* background-color: #ff0; */
}
.goods_img_container {
	width: 191rpx;
	height: 191rpx;
}
.goods_text_container {
	width: 463rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.goods_title {
	font-size: 24rpx;
	line-height: 33rpx;
	color: #434343;
}
.goods_pirce {
	font-size: 24rpx;
}
.dollar {
	font-size: 18rpx;
	color: #7d00ff;
}
</style>
